<template>
	<view class="shouYi">
		<view style="width:100%;" :style="{height:heightChart + 'rpx'}">
			<l-echart ref="chartRef"></l-echart>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		defineProps,
		nextTick,
		watch
	} from 'vue'
	import * as echarts from 'echarts'

	const props = defineProps({
		daiKuanData: {
			type: Array,
			default: []
		}
	})


	const heightChart = ref(422)

	// 获取容器的dom元素
	const chartRef = ref(null)
	// echart图表的配置信息
	const Options = ref({})

	onMounted(() => {
		nextTick(() => {
			addPie()
		})

	})

	watch(() => props.daiKuanData, (newArr, oldArr) => {
		console.log("22222222");
		addPie()
	}, {
		deep: true
	});

	// 加载饼图结构
	const addPie = async () => {
		const MyPie = await chartRef.value.init(echarts)
		Options.value = {
			// title: {
			// 	text: 'Beijing AQI',
			// 	left: '10%'
			// },
			tooltip: {
				trigger: 'axis'
			},
			grid: {
				// left: '5%',
				right: '5%',
				top: "10%",
				bottom: '10%'
			},
			xAxis: {
				data: props.daiKuanData.map(function(item) {
					return item.time;
				})
			},
			yAxis: {},
			// toolbox: {
			// 	right: 10,
			// 	feature: {
			// 		dataZoom: {
			// 			yAxisIndex: 'none'
			// 		},
			// 		restore: {},
			// 		saveAsImage: {}
			// 	}
			// },
			series: {
				name: '上行带宽',
				type: 'line',
				data: props.daiKuanData.map(function(item) {
					return item.up;
				})
			},
		}
		MyPie.setOption(Options.value)
	}
</script>

<style>
	.shouYi {
		padding: 20rpx;
		box-shadow: inset 0rpx 0rpx 32rpx 14rpx rgba(43, 23, 147, 0.59);
	}
</style>